<template>
	<view class="result">
		<image class="app_bg" src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/yys/bj.png" />
    <view class="result_con" v-if="resultData?.payStatus != 1">
      <image class="result_con_bg" src="../../static/result/con_bg.png" />
      <view class="result_sub result_noPaySub">
        <view class="result_sub_title">测试结果已生成！</view>
        <view class="result_sub_box">
          <template v-if="resultData?.orderType != 14">
            <view class="result_sub_con" v-for="(item, index) in answerList" :key="index">
              <view class="result_sub_conL">{{ item.context }}</view>
              <view class="result_sub_conR">准确度 {{ item.accuracy }}</view>
            </view>
          </template>
          <template v-else>
            <template v-if="answerList && answerList.length">
              <view class="result_sub_con">
                <view class="result_sub_conL">【男命】{{ resultData.birthday }} {{ resultData.birthTime }}</view>
              </view>
              <view class="result_sub_con">
                <view class="result_sub_conL">{{ answerList[0].fleetingTime }}</view>
              </view>
            </template>
          </template>
        </view>
      </view>
      <view class="result_noPay">剩余{{ resultData?.resultCount || 0 }}条解析...</view>
      <view class="result_con_btn" @click="showPayPopup">
        <image src="../../static/result/btn.png" />
      </view>
    </view>
    <view class="result_con" v-else>
      <image class="result_con_bg" src="../../static/result/con_bg.png" />

      <view class="result_sub result_paySub">
        <view class="result_sub_title">测试结果已生成！</view>
        <scroll-view :scroll-y="true" class="result_sub_box">
          <template v-if="resultData?.orderType != 14">
            <view class="result_sub_con" v-for="(item, index) in answerList" :key="index">
              <view class="result_sub_conL">{{ item.context }}</view>
              <view class="result_sub_conR">准确度 {{ item.accuracy }}</view>
            </view>
          </template>
          <template v-else>
            <template v-if="answerList && answerList.length">
              <template v-if="manJudge">
                <view class="result_sub_con">
                  <view class="result_sub_conL">【男命】{{ resultData.birthday }} {{ resultData.birthTime }}</view>
                </view>
                <view class="result_sub_con">
                  <view class="result_sub_conL">{{ answerList[0].fleetingTime }}</view>
                </view>
                <view class="result_sub_con">
                  <view class="result_sub_conL">{{ answerList[0].fleetingTime }}</view>
                </view>
                <view class="result_sub_con">
                  <view class="result_sub_conL">{{ answerList[0].fleetingTime }}</view>
                </view>
              </template>
              <template v-else>
                <view class="result_sub_con">
                  <view class="result_sub_conL">【女命】{{ resultData.womanBirthday }} {{ resultData.womanBirthtime }}</view>
                </view>
                <view class="result_sub_con">
                  <view class="result_sub_conL">{{ answerList[1].fleetingTime }}</view>
                </view>
                <view class="result_sub_con">
                  <view class="result_sub_conL">{{ answerList[1].fleetingTime }}</view>
                </view>
                <view class="result_sub_con">
                  <view class="result_sub_conL">{{ answerList[1].fleetingTime }}</view>
                </view>
              </template>
            </template>
          </template>
        </scroll-view>
        <view class="result_noPay">
          <view class="result_noPay_top">
            <image class="result_noPay_topIcon" src="../../static/result/top.png" />
            <image class="result_noPay_topIcon result_noPay_topIcon1" src="../../static/result/top.png" />
          </view>
          <view class="result_noPay_title">共{{ resultData?.resultCount || 0 }}条详解，上滑查看</view>
        </view>
      </view>
    </view>
    <view class="result_wedlock" @click="manJudge = !manJudge"
     :class="manJudge?'result_womanWedlock':'result_manWedlock'"
     v-if="resultData?.orderType == 14 && resultData?.payStatus == 1">
      <image src="../../static/my/my_right_icon1.png" />
      查看{{manJudge?'女':'男'}}方测算结果
    </view>
    <view class="result_remarks" v-if="resultData?.orderType == 13">
      注：【★】表示重要；【格】表示准确度比较高；【吉】【忌】【凶】【贵】【富】等表示富贵情况，或八字好坏。【内容】表示重要，或八字术语。
    </view>
    <view class="result_remarks" v-else-if="resultData?.orderType == 14">
      <view>
        分值说明：-50以下极差；-50~0差；0~30普通；30~70良好；70以上优秀。
      </view>
      <view>
        分值越大，影响越大，单项10分以内的意义不大仅供参考。
      </view>
      <view>
        负值表示：婚姻不吉可能是离婚、或配偶早亡、或一方多病，在一起助力不大。
      </view>
    </view>
    <view class="result_remarks" v-else-if="resultData?.orderType == 15">
      <view>注：紫微斗数根据出生时辰推算命运从而规划人生，能够准确推断一生的运势和基本情况，与四柱八字一样准确。</view>
      <view>格局重复的当一个看。内容相反折中看，同时参考准确度。</view>
    </view>
    <view class="result_remarks" v-else-if="resultData?.orderType == 16">
      <view>注：算命婚姻指：以婚姻为目的，共同生活超过半年的同居关系为结婚，与是否领证无关。</view>
      <view>紫微斗数算命重结果，四柱生辰八字算命重过程。</view>
    </view>

    <uni-popup ref="popup">
      <view class="payPopup">
        <view class="popup_content">
          <image class="popup_bg" src="../../static/result/popup.png" />
          <view class="popup_content_title1">限时特惠</view>
          <view class="popup_content_center">
            <view class="popup_content_title2">
              <view class="popup_content_title2_price">
                {{ packageData?.discount }}
                <view class="popup_content_title2_icon">特惠</view>
              </view>
              <view class="popup_content_title2_unit">元</view>
            </view>
            <view class="popup_content_title3">原价{{ packageData?.amount }}元</view>
            <view class="popup_content_title4">即可解锁全部解析!</view>
          </view>
          <view class="popup_content_title5" @click="payMoney">立即解锁</view>
        </view>
        <view class="popup_close" @click="closePayPopup">
          <image class="popup_close_icon" src="../../static/result/closePopup.png" />
        </view>
      </view>
    </uni-popup>
	</view>
</template>

<script setup>
import request from '../../common/js/request'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { uniPay } from '@/common/js/method.js'

let answerList = ref(null)
const popup = ref();
let resultData = ref(null);
let packageData = ref(null);
let manJudge = ref(true);
onLoad((opt)=>{
  getOrderInfo(opt.id || '1768897818359447553');
  // popup.value.open();
})

const showPayPopup = function () {
  popup.value.open();
}
const closePayPopup = function () {
  popup.value.close();
}
const payMoney = function () {
  let params = {
    id: resultData.value.id,
    payType: 2
  }
  request('/api/busi/busi/yys/order/pay', params).then((res)=>{
    uniPay(res.data).then(()=>{
      getOrderInfo(resultData.value.id);
      closePayPopup();
    })
  })
}

const getOrderInfo = function (id) {
  request('/api/busi/busi/yys/order/detail', {id}).then((res)=>{
    resultData.value = res.data;
    let NavigationBarTitle = '八字详解';
    if(res.data.orderType == 14) {
      NavigationBarTitle = '八字合婚';
    }else if(res.data.orderType == 15) {
      NavigationBarTitle = '紫微斗数';
    }else if(res.data.orderType == 16) {
      NavigationBarTitle = '算姻缘';
    }
    uni.setNavigationBarTitle({
      title: NavigationBarTitle,
    })
    if(res.data.orderType != 14) {
      answerList.value = res.data.calculateContent;
    }else {
      answerList.value = res.data.matrimony;
    }
    getSelectList();
  })
}

const getSelectList = function () {
	let url = '/api/busi/package/select/by-applyid'
	request(url).then((res)=>{
		if(res.status == 200) {
			packageData.value = res.data.find(item => item.type == resultData.value.orderType);
		}
	});
}
</script>

<style lang="less" scoped>
.result {
  .result_con {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40rpx;
    position: relative;
  }
  .result_sub {
    position: absolute;
    top: 210rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 460rpx;
    .result_sub_con {
      margin-top: 6rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 1px solid rgba(117, 72, 59, .1);
      padding: 16rpx 0;
      &:first-child {
        margin-top: 0;
      }
      .result_sub_conL {
        flex: 1;
        font-size: 28rpx;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 44rpx;
        color: rgba(117, 72, 59, 1);
      }
      .result_sub_conR {
        width: 160rpx;
        padding-left: 10rpx;
        font-size: 28rpx;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 44rpx;
        color: rgba(117, 72, 59, 1);
      }
    }
  }
  .result_noPaySub {
    .result_sub_box {
      margin-top: 10rpx;
    }
    .result_sub_title {
      text-align: center;
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 52rpx;
      color: rgba(117, 72, 59, 1);
    }
    .result_sub_conL {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .result_paySub {
    .result_sub_title {
      position: absolute;
      top: -100rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 52rpx;
      color: rgba(117, 72, 59, 1);
      white-space: nowrap;
    }
    .result_sub_con:first-child {
      padding-top: 0;
    }
    .result_sub_box {
      height: 650rpx;
    }
    .result_noPay {
      position: absolute;
      top: calc(100% + 50rpx);
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }
  }

  .result_noPay {
    z-index: 1;
    position: absolute;
    bottom: 360rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28rpx;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(117, 72, 59, 1);
  }
  .result_noPay_top {
    position: relative;
    height: 30rpx;
    margin-bottom: 10rpx;
  }
  .result_noPay_topIcon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26rpx;
    height: 16rpx;
  }
  .result_noPay_topIcon1 {
    position: absolute;
    top: 14rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  .result_noPay_title {
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(117, 72, 59, 1);
  }
  .result_con_bg {
    margin: 0 auto;
    width: 95%;
    height: 1010rpx;
  }
  .result_con_btn {
    position: absolute;
    bottom: 180rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 480rpx;
    height: 180rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .result_remarks {
    margin: 30rpx auto 0;
    border-radius: 16rpx;
    background: rgba(246, 237, 216, 0.6);
    box-shadow: 0 4rpx 8rpx  rgba(0, 0, 0, 0.25);
    width: 86%;
    box-sizing: border-box;
    padding: 24rpx 20rpx;
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 36rpx;
    color: rgba(56, 56, 56, 1);
  }
  .payPopup {
    .popup_content {
      position: relative;
    }
    .popup_bg {
      width: 690rpx;
      height: 610rpx;
    }
    .popup_content_title1 {
      position: absolute;
      top: 60rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 0;
      color: rgba(252, 234, 198, 1);
    }
    .popup_content_center {
      width: 350rpx;
      position: absolute;
      top: 150rpx;
      left: 50%;
      transform: translateX(-50%);
    }
    .popup_content_title2 {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .popup_content_title2_price {
        position: relative;
        font-size: 96rpx;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 96rpx;
        color: rgba(212, 48, 48, 1);
      }
      .popup_content_title2_icon {
        position: absolute;
        top: 0;
        left: calc(100% + 16rpx);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 36rpx;
        border-radius: 16rpx 0 16rpx 0;
        background: rgba(212, 48, 48, 1);
        font-size: 24rpx;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 36rpx;
        color: rgba(255, 255, 255, 1);
      }
      .popup_content_title2_unit {
        font-size: 28rpx;
        font-weight: 500;
        letter-spacing: 0;
        color: rgba(212, 48, 48, 1);
      }
    }
    .popup_content_title3 {
      margin-top: 10rpx;
      text-align: center;
      font-size: 20rpx;
      font-weight: 500;
      letter-spacing: 0;
      text-decoration-line: line-through;
      color: rgba(117, 72, 59, 1);
    }
    .popup_content_title4 {
      margin-top: 16rpx;
      text-align: center;
      font-size: 36rpx;
      font-weight: 600;
      letter-spacing: 0;
      color: rgba(117, 72, 59, 1);
    }
    .popup_content_title5 {
      position: absolute;
      bottom: 75rpx;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300rpx;
      height: 100rpx;
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 0;
      color: rgba(117, 72, 59, 1);
    }
    .popup_close {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 46rpx;
    }
    .popup_close_icon {
      width: 60rpx;
      height: 60rpx;
    }
  }
  .result_wedlock {
    position: fixed;
    top: 20%;
    right: 0;
    width: 40rpx;
    text-align: center;
    border-radius: 16rpx 0 0 16rpx;
    box-shadow: -4rpx 0 8rpx  rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20rpx 8rpx 20rpx 8rpx;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 22px;
    color: rgba(255, 255, 255, 1);
    &>image {
      margin-bottom: 8rpx;
      width: 16rpx;
      height: 26rpx;
    }
  }
  .result_manWedlock {
    background: rgba(69, 145, 230, 1);
  }
  .result_womanWedlock {
    background: rgba(230, 92, 125, 1);
  }
}
</style>